<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增电影放映时间模板，具体放映时间从模板生成')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: header('下拉框')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-tickettemplatemovieshowtime-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">放映厅编号：</label>
                <div class="col-sm-8">
<!--                    <input name="showNumber" class="form-control" type="text">-->
                    <input name="showNumber" class="form-control" type="text" style="display:none;">
                    <select class="form-control" name="showNumberselect">
                        <option value="0">请选择放映厅</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">放映厅名字：</label>
                <div class="col-sm-8">
                    <input name="showName" class="form-control" type="text" readonly required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">票量：</label>
                <div class="col-sm-8">
                    <input name="ticketCount" class="form-control" type="text" readonly required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">放映开始日期：</label>
                <div class="col-sm-8">
<!--                    <div class="input-group date">-->
<!--                        <input name="playStartDate" class="form-control" placeholder="yyyy-MM-dd" type="text"required>-->
<!--                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
<!--                    </div>-->

                    <div class="input-daterange input-group">
                        <input type="text" class="input-sm form-control" id="datetimepicker-startTime" placeholder="yyyy-MM-dd" name="playStartDate" required/>
                        <span class="input-group-addon">到</span>
                        <input type="text" class="input-sm form-control" id="datetimepicker-endTime" placeholder="yyyy-MM-dd" name="playEndDate" required/>
                    </div>
                </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label">放映结束日期：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <div class="input-group date">-->
<!--                        <input name="playEndDate" class="form-control" placeholder="yyyy-MM-dd" type="text" required>-->
<!--                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label">放映时间：</label>
                <div class="col-sm-8">
<!--                    <div class="input-group date">-->
<!--                        <input name="playTime" class="form-control" placeholder="yyyy-MM-dd" type="text">-->
<!--                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
<!--                    </div>-->

<!--                    <div class="input-group date">-->
<!--                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
<!--                        <input type="text" class="form-control" id="datetimepicker-demo-3" placeholder="HH:mm"required>-->
<!--                    </div>-->

<!--                    <div class="input-group time">-->
<!--                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
<!--                        <input type="text" class="form-control" id="datetimepicker-demo-3" placeholder="HH:mm" name="playTime" required>-->
<!--                        <input type="time" class="form-control" id="datetimepicker-demo-3" placeholder="HH:mm" name="playTime" required>-->
                        <input type="time"   name="playTime" required>
<!--                    </div>-->

                </div>


            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">电影ID：</label>
                <div class="col-sm-8">
<!--                    <input name="movieId" class="form-control" type="text">-->

                    <input name="movieId" class="form-control" type="text" style="display:none;">
                    <select class="form-control" name="movieIdselect">
                        <option value="0">请选择放映厅</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">电影名称：</label>
                <div class="col-sm-8">
                    <input name="movieName" class="form-control" type="text" readonly required>
                </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label">是否删除，0否，1删除：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="isDel" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />

    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: bootstrap-select-js" />

    <script th:inline="javascript">
        var prefix = ctx + "system/tickettemplatemovieshowtime"
        $("#form-tickettemplatemovieshowtime-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
//
                if( 0 == $('select[name=showNumberselect]').val())
                {
                    $.modal.alert('放映厅编号不能为空，请选择');
                    return;
                }
                if( 0 == $('select[name=movieIdselect]').val())
                {
                    $.modal.alert('电影ID不能为空，请选择');
                    return;
                }
                var dataObj = $('#form-tickettemplatemovieshowtime-add').serialize();

                console.log("添加放映模板=" +
                     ",data="+unescape(dataObj) );

                console.log("添加放映模板 playTime="+$("input[name=playTime]").val()+"@");


                $.operate.save(prefix + "/add", dataObj);
            }
        }

        $("input[name='playStartDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='playEndDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        // $("input[name='playTime']").datetimepicker({
        //     format: "HH:mm",
        //     minView: "time",
        //     autoclose: true
        // });



        //时间控件
        $(function(){
            <!-- datetimepicker示例 -->


            $("#datetimepicker-demo-3").datetimepicker({
                format: "hh:ii",
                autoclose: true
            });

            $('.form_date').datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true
            });

            $("#datetimepicker-startTime").datetimepicker({
                format: 'yyyy-mm-dd',
                minView: "month",
                todayBtn:  true,
                autoclose: true,
                endDate : new Date(),
            }).on('changeDate', function(event) {
                event.preventDefault();
                event.stopPropagation();
                var startTime = event.date;
                $('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
            });

            $("#datetimepicker-endTime").datetimepicker({
                format: 'yyyy-mm-dd',
                minView: "month",
                todayBtn:  true,
                autoclose: true,
                endDate : new Date(),
            }).on('changeDate', function(event) {
                event.preventDefault();
                event.stopPropagation();
                var endTime = event.date;
                $("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
            });

            <!-- laydate示例 -->
            layui.use('laydate', function(){
                var laydate = layui.laydate;

                laydate.render({
                    elem: '#laydate-demo-1'
                });

                laydate.render({
                    elem: '#laydate-demo-2',
                    type: 'date'
                });

                laydate.render({
                    elem: '#laydate-demo-3',
                    type: 'datetime',
                    trigger: 'click'
                });

                laydate.render({
                    elem: '#laydate-demo-4',
                    range: true
                });

                var startDate = laydate.render({
                    elem: '#laydate-startTime',
                    max: $('#laydate-endTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function(value, date) {
                        // 结束时间大于开始时间
                        if (value !== '') {
                            endDate.config.min.year = date.year;
                            endDate.config.min.month = date.month - 1;
                            endDate.config.min.date = date.date;
                        } else {
                            endDate.config.min.year = '';
                            endDate.config.min.month = '';
                            endDate.config.min.date = '';
                        }
                    }
                });

                var endDate = laydate.render({
                    elem: '#laydate-endTime',
                    min: $('#laydate-startTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function(value, date) {
                        // 开始时间小于结束时间
                        if (value !== '') {
                            startDate.config.max.year = date.year;
                            startDate.config.max.month = date.month - 1;
                            startDate.config.max.date = date.date;
                        } else {
                            startDate.config.max.year = '';
                            startDate.config.max.month = '';
                            startDate.config.max.date = '';
                        }
                    }
                });
            });
        });


        //页面初始化，初始化 放映厅列表
        $.get(ctx + 'system/ticketshowroom/getShowRoomList', null, function(data){//param为参数---键值对方式
            $.each(data.array, function(i,item){
                // console.log("遍历信息="+JSON.stringify(item));
                var showStr = "放映厅编号["+item.number+"],名称["+item.name+"],座位["+item.seatCount+"]";
                $("select[name=showNumberselect]").append("<option value='"+JSON.stringify(item)+"'>"+showStr+"</option>");
            });
        });
        //选择框变化事件
        $('select[name=showNumberselect]').on('change',function(){
            var val = $(this).val();
            // console.log("此时val="+val+"@");
            if("0" == val)
            {
                $('input[name=showNumber]').val(0);
                $("input[name=showName]").val("");
                $("input[name=ticketCount]").val("");
                return;
            }
            var item = JSON.parse(val);
            $('input[name=showNumber]').val(item.number);
            $("input[name=showName]").val(item.name);
            $("input[name=ticketCount]").val(item.seatCount);
        }).on('focus',function(){
            // console.log("此时数据focus");
        })

        //初始化电影信息列表
        $.get(ctx + 'system/ticketmoviebaseinfo/getMovieInfoList', null, function(data){//param为参数---键值对方式
            $.each(data.array, function(i,item){
                // console.log("遍历信息="+JSON.stringify(item));
                var showStr = "电影ID["+item.id+"],名称["+item.name+"],年份["+item.movieYear+"]";
                $("select[name=movieIdselect]").append("<option value='"+JSON.stringify(item)+"'>"+showStr+"</option>");
            });
        });
        //选择框变化事件
        $('select[name=movieIdselect]').on('change',function(){
            var val = $(this).val();
            console.log("此时val="+val+"@");
            if("0" == val)
            {
                $('input[name=movieId]').val(0);
                $("input[name=movieName]").val("");
                return;
            }
            var item = JSON.parse(val);
            $('input[name=movieId]').val(item.id);
            $("input[name=movieName]").val(item.name);
        }).on('focus',function(){
            // console.log("此时数据focus");
        })


    </script>
</body>
</html>